<template>
  <el-dialog
    @close="close"
    title="用户个人信息"
    :visible.sync="dialog"
    width="40%"
  >
    <div class="perl">
      <div class="user_img">
        <p>用户头像：</p>
        <img :src=formInline.photo>
      </div>
      <p>用户昵称：<span class="sp4">{{formInline.nick_name}}</span></p>
      <p>用户ID：<span class="sp3">{{formInline.user_id}}</span></p>
      <p>用户手机号：<span class="sp5">用户昵称</span></p>
      <p>性别：<span class="sp2"><span v-if="formInline.sex ==1">男</span><span v-else>女</span></span></p>
      <p>所在地：<span class="sp3">{{formInline.area}}</span></p>
      <p>生日：<span class="sp2">{{formInline.birthday}}</span></p>
      <div class="game">
        <p class="p1">游戏：</p>
        <div v-for="item in formInline.gamelist" :key="item.game_id">
          <img :src="item.photo">
          <div>
             <p>{{item.game_name}}</p>
             <p>服务器：{{item.server}}</p>
             <p>段位：{{item.level}}</p>
          </div>
        </div>
        <!--<div>
          <img src="">
          <div>
            <p>英雄联盟</p>
            <p>服务器：电信-班德尔城</p>
            <p>段位：班耀的钻石</p>
          </div>
        </div>-->
      </div>

      <p>账户余额：<span class="sp4">{{formInline.gold_number}}</span></p>
    </div>
  </el-dialog>

</template>
<script>
  import {getPersonInfoAPI } from '@/api/person'
  export default {
    name: 'PersonInfo',
    props: {
      dialog_: {
        type: Boolean,
        default: false
      },
      id: {
        type: String,
        default: null
      }
    },
    data() {
      var validateSort = (rule, value, callback) => {``
        var reg = /^[0-9]\d*$/
        if (value === null || value === '' | value === undefined) {
          callback()
        } else if (!reg.test(value)) {
          return callback(new Error('请输入正确的数字'))
        } else {
          callback()
        }
      }
      return {
        props: {
          label: 'title',
          children: 'children'
        },
        keyDisable:false,
        dialog: false,
        formInline: {
          id: '',
          operation: '',
          dictKey: '',
          dictValue: '',
          description: '',
          remark: ''
        },
        btnLoading: false,
        treeData: []
      }
    },
    methods: {
      // 根据角色ID查询角色详情
      getDetails() {
        getPersonInfoAPI({ userid: this.id}).then(res => {
          if (res.code === 0) {
            this.formInline = res.data
          } else {
            this.$message.error('查询失败')
          }
        })
      },
      close() {
        this.$emit('close')
      }
    },
    mounted() {
      this.dialog = this.dialog_
      this.getDetails()
    }
  }
</script>
<style>
  .user_img{
    height:100px;
    width:100%;
  }
  .user_img img{
    width:90px;
    height:90px;
    /*background:grey;*/
    float:left;
    margin-left:20px;
    margin-top:14px;
  }
  .user_img  p{
    float:left;

  }
  .game{
    width:100%;
    height:130px;
  }
  .game div{
    float: left;
    background: whitesmoke;
    margin-left:20px;
    margin-top:10px;
    width:291px;
  }
  .game .p1{
    float:left;
    width:60px;
  }
  .game div img{
    width:90px;
    height:90px;
    margin-top: 10px;
    margin-left: 8px;
  }
  .game div div{
    float: left;
    margin-left: 110px;
    margin-top: -103px;
    width:186px;

  }
  /*.perl{*/
  /*  position:relative;*/
  /*}*/
  .sp2{
    display: inline-block;
    margin-left: 45px;

  }
  .sp3{
    display: inline-block;
    margin-left: 31px;
  }
  .sp4{
    display: inline-block;
    margin-left: 19px;
  }
  .sp5{
    display: inline-block;
    margin-left: 3px;
  }
  .perl{
    border-top:1px solid lightgrey;
    width:100%;
    margin-top:1px;
  }
</style>
